<script>
export default {}
</script>

<template>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/container.html</div>
  <div> Ref: https://element-plus.gitee.io/zh-CN/component/layout.html</div>

  <el-container>
    <el-header class="red">Header</el-header>
    <el-main class="green">
      <el-row :gutter="20">
        <el-col :span="24" class="grey"> A Column Size = 24 (all row) </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col v-bind:span="12" class="grey"> A Column Size = 12 </el-col>
        <el-col :span="6" :offset="6" class="grey"> A Column Size = 6 (offset = 6) </el-col>
      </el-row>
    </el-main>
    <el-footer class="blue">Footer</el-footer>
  </el-container>
  
</template>

<style scoped>
  .red {
    color: #FFFFFF;
    background-color: #FF0000;
  }
  .green {
    background-color: #00FF00;
  }
  .blue {
    color: #FFFFFF;
    background-color: #0000FF;
  }
  .grey {
    background-color: #AAAAAA;
  }
  .el-row {
    padding: 20px 0;
  }
</style>
